<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="240px">
        <Menus :menuList="menuList"></Menus>
      </el-aside>
      <el-container class="el-container-main">
        <el-header>Header</el-header>
        <el-main>
          <div id="mvContainer" class="content-container"></div>
          <!-- <SubContainer class="content-container"></SubContainer> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { start, setDefaultMountApp } from "qiankun";
// import SubContainer from "./components/SubContainer.vue";
import Menus from "./components/Menu.vue";
import { registerApps } from "@/micro/index";

// 获取菜单数据
import { useMenu } from "../../store/menu";
const currMenu = useMenu();

onMounted(() => {
  if (!window.qiankunStarted) {
    window.qiankunStarted = true;
    registerApps();
    start({
      sandbox: {
        experimentalStyleIsolation: true, // 样式隔离
      },
      prefetch: false,
    });
  }
});

interface Menu {
  id: string,
  path: string;
  name: string;
  children: Menu[];
}

let menuList: any = ref([
  {
    id: "1",
    path: "",
    name: "系统管理",
    children: [
      {
        id: "34534",
        path: "",
        name: "权限管理",
        children: [
          {
            id: "1535",
            path: "/iot/home",
            name: "人员权限",
          },
        ],
      },
      {
        id: "253574",
        path: "",
        name: "菜单管理",
        children: [
          {
            id: "67567",
            path: "/iot/test",
            name: "权限测试",
          },
          {
            id: "56756",
            path: "/iot/test2",
            name: "权限测试2",
          },
        ],
      },
      {
        id: "86543",
        path: "/iot/sub",
        name: "以图搜人",
      },
    ],
  },
  {
    id: "534535",
    path: "",
    name: "人员管理",
    children: [
      {
        id: "4535",
        path: "",
        name: "考勤设置",
        children: [
          {
            id: "675675",
            path: "/aca/sub",
            name: "人员配置",
          },
          {
            id: "464645",
            path: "/aca/test",
            name: "人员来源",
          },
        ],
      },
      {
        id: "456546",
        path: "/aca/home",
        name: "考勤管理",
      },
    ],
  },
]);

// 保存路由信息
currMenu.setMenuList(menuList.value);
localStorage.setItem("menuList", JSON.stringify(menuList.value));

let meunUrlList: any = [],
  routerList: any = [];

let getMeunListByArray = (meunArray = []) => {
  meunArray.forEach((meunItem: any) => {
    // 重要：这边跳转url改为 description 资源，测试成功后需要调整回来 jumpUrl
    if (meunItem.path) {
      meunUrlList.push(meunItem.path);
      routerList.push(meunItem);
    }
    if (meunItem.children && meunItem.children.length > 0) {
      getMeunListByArray(meunItem.children);
    }
  });
};
getMeunListByArray(menuList.value);

console.log(meunUrlList, routerList);
localStorage.setItem("effectiveUrl", JSON.stringify(meunUrlList));
localStorage.setItem("routerList", JSON.stringify(routerList));
currMenu.setRouterList(routerList);

// 默认加载第一个子路由
if (meunUrlList) {
  setDefaultMountApp(meunUrlList[0]);
}
</script>
<style scoped>
.common-layout {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-aside {
  background-color: #eef1f6;
}
.el-container-main .el-header {
  background-color: #495568;
}
.content-container {
  width: 100%;
  height: 70vh;
  background: #ccc;
}
</style>
